<template>
  <div>
    <el-dialog
      ref="Drawer"
      :close="close"
      :loading="loading"
      title="导入人员"
      width="560px"
      :visible.sync="dialog"
    >
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :on-remove="handleRemove"
        :file-list="fileList"
        :http-request="upload"
        accept="application/vnd.ms-excel"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div
          class="el-upload__tip"
          slot="tip"
        >
          <ul>
            <li>第一步:下载Excel人员模板;</li>
            <li>第二步:使用模板编辑人员,点击"选择文件"选择您编辑好的Excel文档;</li>
            <li>第三步:点击"确认上传"完成人员导入</li>
          </ul>
        </div>
      </el-upload>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave()"
          size="small"
        ><i class="el-icon-circle-check ml0 mr10 el-icon--right"></i> {{ loading ? '提交中 ...' : '确认上传' }}</el-button>
        <el-button
          size="small"
          @click="handleDownload()"
        ><i class="el-icon-circle-close ml0 mr10 el-icon--right"></i> 下载模板</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as department from "@/api/department.js";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      dialog: false, //弹框
      fileList: [], //上传文件
      ruleForm: {},
      formLabelWidth: "100px", //表单label宽度
      loading: false, //表单提交按钮
      title: "",
    };
  },
  methods: {
    //弹框关闭
    close() {
      this.dialog = false;
    },
    upload(row) {
      let formDate = new FormData();
      formDate.append("file", row.file);
      this.fileList = [
        {
          name: row.file.name,
          file: formDate,
        },
      ];
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    //下载模板
    handleDownload() {
      department.downloadTemplate().then((res) => {
        const link = document.createElement("a");
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel", // "application/zip",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = "人员"; // 下载后文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    //初始化弹框
    showModal(_type, _row) {
      this.dialog = true;
      this.$nextTick((_) => {
        this.loading = false;
        this.fileList = []
      });
    },
    //提交保存
    handleSave() {
      this.loading = true;
      if (this.fileList.length == 0) {
        this.$message({
          type: "error",
          message: "请选择上传文件",
        });
        return;
      }
      department
        .importList(this.fileList[0].file)
        .then((res) => {
          if (res && res.success) {
            this.dialog = false;
            this.loading = false;
            this.$emit("getDataList");
          } else {
            this.loading = false;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__title {
  font-weight: bold;
  font-size: 16px;
}
::v-deep .el-dialog__header {
  padding: 18px 20px;
}
::v-deep .el-dialog__headerbtn {
  top: 18px;
}
::v-deep .el-dialog__header {
  background: #f0f1f5;
}
::v-deep .el-dialog__footer {
  padding: 24px;
  text-align: center;
  border-top: 1px solid #d7d9db;
}
::v-deep .el-upload {
  width: 100% !important;
  .el-upload-dragger {
    margin: 0 auto;
  }
}
::v-deep .el-upload__tip {
  font-size: 14px;
  line-height: 1.8;
}
</style>